<template>
	<view class="bgDefault">
		<tn-nav-bar >添加活动</tn-nav-bar>
		<view class="mentorApply" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<view class="form">
				<tn-form :model="model" ref="formcc" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
					<tn-form-item label="标题"  :required="true" prop="title"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.title"  placeholder="请输入活动标题" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					
					<tn-form-item label="选择分类" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input @click="cateShow=true" v-model="model.cate_name" placeholder="请选择活动分类" :border="border" :clearable="false"></tn-input>
					  <tn-select v-model="cateShow" valueName="id" labelName="name" mode="single" :list="cateboxList" @confirm="confirmCate"></tn-select>
					</tn-form-item>
					
					<tn-form-item label="价格"  :required="true" prop="price"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.price" type="number" placeholder="请输入活动价格" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					
					<tn-form-item label="导师人数"  :required="true" prop="mentor_num"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.mentor_num" type="number" placeholder="请输入导师可报名人数" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					
					<tn-form-item label="用户人数"  :required="true" prop="user_num"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.user_num" type="number" placeholder="请输入用户可报名人数" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					
					
					<tn-form-item label="开始时间"  :required="true" prop="start_time"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input @click.stop="showTime(1)" v-model="model.start_time" placeholder="请选择开始时间" :border="border" :clearable="false"></tn-input>
					  
					  <tn-picker mode="time" v-model="start_time_show" @confirm="cofirmStartTime" :params="timeParam"></tn-picker>
					</tn-form-item>
					
					<tn-form-item label="结束时间"  :required="true" prop="end_time"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input @click.stop="showTime(2)" v-model="model.end_time" placeholder="请选择结束时间" :border="border" :clearable="false"></tn-input>
					  <tn-picker mode="time" v-model="end_time_show" @confirm="cofirmEndTime" :params="timeParam"></tn-picker>
					</tn-form-item>
					
					<tn-form-item label="位置"  :required="true" prop="area" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.area" placeholder="请输入位置" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					
					<tn-form-item label="选择定位"  :required="true"   :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <text @tap="chooseMap">{{clickText}}</text>
					</tn-form-item>
					
					<tn-form-item label="活动图"  :required="true"   :labelPosition="labelPosition" :labelAlign="labelAlign">					
						<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
							<view class="shotImg">
								<view class="img" v-for="(img,Mindex) in model.pics" :key="Mindex" data-index="{Mindex}" data-id="Mindex" v-model="form.pics">
									<image :src="img"></image>
									<text class="tn-icon-delete" @click="delBtn(index,Mindex)"></text>
								</view>
								<view class="shot" @click="upImage(index)">
									<view class="icon"><text class="iconfont tn-icon-camera"></text></view>
								</view>
							</view>
						</scroll-view>
					</tn-form-item>
					
					<tn-form-item label="活动内容"  :required="true" prop="content" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.content" type="textarea" placeholder="请输入活动内容" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					
					<tn-form-item label="选择场地"  :required="true"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input @click="spaceShow=true" v-model="model.space_name" placeholder="请选择场地" :border="border" :clearable="false"></tn-input>
					  <tn-select v-model="spaceShow" valueName="id" labelName="title" mode="single" :list="spaceList" @confirm="confirmSpace"></tn-select>
					</tn-form-item>
					
					<tn-form-item label="导师分成"  :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-slider v-model="model.mentor_rate" :min="40" :max="60" activeColor="#FF6708">
						  <view class="tn-slider__custom-block">
						    {{ model.mentor_rate }}
						  </view>
					  </tn-slider>
					</tn-form-item>
					
					<tn-form-item label="场地分成"  :required="true"  :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-slider v-model="model.space_rate" :min="20" :max="30" activeColor="#FF6708">
						  <view class="tn-slider__custom-block">
						    {{ model.space_rate }}
						  </view>
					  </tn-slider>
					</tn-form-item>
		
				</tn-form>
							
				<tn-button backgroundColor="#FF6708" :disabled="disabled" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>	
			</view>
			
		</view>
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {leaderOne,leaderCate,addActivity,activityOne,updateActivity} from '@/api/activity/index.js'
	import {updateLeader} from '@/api/user/index.js'
	import {uploadUrl} from '@/api/user/login.js'
	import {selectSpace} from '@/api/space/index.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				spaceList:[],
				timeParam: {
				  year: true,
				  month: true,
				  day: true,
				  hour: true,
				  minute: true,
				  second: true
				},
				spaceShow:false,
				cateShow:false,
				start_time_show:false,
				end_time_show:false,
				loading:false,
				cateboxList:[],
				model:{
					id:"",
					title:"",
					price:"",
					cate_id:"",
					cate_name:[],
					mentor_num:"",
					user_num:"",
					area:'',
					start_time:'',
					end_time:'',
					lat:'',
					lng:'',
					pics:[],
					content:'',
					mentor_rate:40,
					activity_rate:10,
					sys_rate:10,
					space_rate:20,
					space_id:0,
					space_name:""
				},
				clickText:"点击获取",
				errorType: ['message','border-bottom','toast'],
				labelPosition: 'left',
				labelAlign: 'right',
				checkboxWrap: false,
				border: false,
				disabled:false,
				labelWidth: 160,
				rules: {
				  title: [
					{
						required: true,
						message: '请输入标题',
						trigger: ['blur']
					}
				  ],
				  
				 price: [
					{
						required: true,
						message: '请输入价格',
						trigger: ['blur']
					}
				 ],
				 mentor_num: [
					{
						required: true,
						message: '请输入导师报名人数',
						trigger: ['blur']
					}
				 ],
				 user_num: [
					{
						required: true,
						message: '请输入用户报名人数',
						trigger: ['blur']
					}
				 ],
				 area: [
					{
						required: true,
						message: '请输入位置',
						trigger: ['blur']
					}
				 ],
				 // start_time: [
					// 	{
					// 		required: true,
					// 		message: '请选择开始时间',
					// 		trigger: ['blur','change']
					// 	}
				 // ],
				 // end_time: [
					// {
					// 	required: true,
					// 	message: '请选择结束时间',
					// 	trigger: ['blur','change']
					// }
				 // ],
				 
				 content: [
						{
							required: true,
							message: '请填写活动详情',
							trigger: ['blur']
						}
				 ],
				}
			}
		},
		onLoad(e) {
			if(e.id){
				this.model.id = e.id
			}
			this.initData()
		},
		onReady() {
		  this.$refs.formcc.setRules(this.rules)
		},
		methods: {
			confirmSpace(e){
				this.model.space_id = e[0].value
				this.model.space_name = e[0].label
			},
			confirmCate(e){
				this.model.cate_id = e[0].value
				this.model.cate_name = e[0].label
			},
			showTime(i){
				if(i == 1){
					this.start_time_show = true
				}else{
					this.end_time_show = true
				}
			},
			cofirmStartTime(re){
				
				this.model.start_time  = re.year + '-' + re.month + '-' + re.day + " "
				+ re.hour + ":" + re.minute + ":" + re.second
				//console.log( re)
			},
			cofirmEndTime(re){
				this.model.end_time  = re.year + '-' + re.month + '-' + re.day + " "
				+ re.hour + ":" + re.minute + ":" + re.second
			},
			chooseMap(){
				var _t = this
				uni.chooseLocation({
					success: function (res) {
						_t.model.lat = res.latitude
						_t.model.lng = res.longitude
						_t.clickText = "已获取成功"
						//console.log('位置名称：' + res.name);
						//console.log('详细地址：' + res.address);
						//console.log('纬度：' + res.latitude);
						//console.log('经度：' + res.longitude);
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			initData(){
				leaderCate().then(res=>{
					this.cateboxList = res
				})
				
				selectSpace().then(res=>{
					this.spaceList = res
				})
				if(this.model.id > 0){
					this.loading = true
					activityOne({id:this.model.id}).then(res=>{
						this.loading = false
					
						this.model.title = res.title
						this.model.cate_id = res.cate_id
						this.model.cate_name = res.cate_name || ""
						this.model.price = res.price
						this.model.mentor_num = res.mentor_num
						this.model.user_num = res.user_num
						this.model.space_rate = res.space_rate
						this.model.mentor_rate = res.mentor_rate
						this.model.space_name = res.space_name || ''
						this.model.area = res.area
						this.model.lng = res.lng
						this.model.lat =res.lat
						this.model.content = res.content
						this.model.start_time = res.start_time
						this.model.end_time = res.end_time
						this.model.pics = res.pics
						
						this.clickText="已获取成功"
						
					}, err=>{
						this.loading = false
					})
				}
			},
			submit() {
			 // this.$refs.formcc.validate(valid => {
			   // if (valid) {
					this.loading = true
					
					if(this.model.lat.length < 1){
						uni.showToast({
							icon: 'none',
							title: '请选择定位！',
						})
						
						return false;
					}
					
					if(this.model.pics.length<1){
						uni.showToast({
							icon: 'none',
							title: '请上传活动图！',
						})
						
						return false;
					}
					if(this.model.id){
						updateActivity(this.model).then(res=>{
							this.loading = false
							uni.showToast({
								icon: 'none',
								title: '编辑活动成功！',
								duration:2000
							})
							
							setTimeout(function(){
								uni.navigateTo({
								  url: '/pages/user/activity/activity'
								}) 
							}, 2000)
						},err=>{
							this.loading = false
						})
					}else{
						addActivity(this.model).then(res=>{
							this.loading = false
							uni.showToast({
								icon: 'none',
								title: '发布活动成功！',
								duration:2000
							})
							
							setTimeout(function(){
								uni.navigateTo({
								  url: '/pages/user/activity/activity'
								}) 
							}, 2000)
						},err=>{
							this.loading = false
						})
					
					}
					
			  //   } else {
				 //  console.log(this.model)
			  //   }
			  // })
			},
			checkboxGroupChange(event) {
			  this.model.cateArray = event
			  var _ids = [];
			  this.cateboxList.map(re=>{
				  if(this.model.cateArray.includes(re.name)){
					  _ids.push(re.id)
				  }
			  })
			  this.model.cate_id = _ids.join(",")
			},
			
			upFile(filePath, index){
				uni.uploadFile({
					url: uploadUrl,
					filePath: filePath,
					name: 'image',
					success: (res) => {
						var data = JSON.parse(res.data)
						if(data.code == 200){
							this.model.pics.push(data.data.url);
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg || err.msg,
							showCancel: false
						});
					}
				})
			},
			upImage(index){
				var that = this
				uni.chooseImage({
					count:5,
					sizeType:['compressed'],
					sourceType:['album'],
					success: (res) => {
						res.tempFilePaths.map(re=>{
							that.upFile(re, index)
						})
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			// 点击删除
			delBtn(index,Mindex){
				this.form.pics.splice(Mindex,1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgDefault{
		background: $tn-main-bg;
		min-height: 100vh;
	}
  .mentorApply{
	 // background: $tn-main-bg;
	  //height: 100vh;
	  padding-left: 6%;
	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}
.shotImg{
	display: flex;padding: 10px 0;
	.img{width: 100rpx;height: 100rpx;position: relative;
		image{width: 100%;height: 100%;object-fit: cover;}
		//text{position: absolute;display: block;width: 40rpx;height: 40rpx;text-align: center;
		//line-height: 40rpx;right:0rpx;background: rgba(0,0,0,0.6);color:#fff;border-radius: 50%;
		//top: -10rpx;
		//}
	}
}
.shot{background:#eee;border: 1px dashed #ddd;width:100rpx;height: 100rpx;line-height: 100rpx;
	text-align: center;border-radius: 10rpx;
	//.icon{margin-top:40rpx;}
	.icon .iconfont{font-size:40rpx;}
}

.tn-slider__custom-block {
    background-color: $tn-main-orange;
    width: auto;
    height: 40rpx;
    line-height: 40rpx;
    padding: 0 5rpx;
    border-radius: 50%;
    text-align: center;
    color: #FFFFFF;
  }
</style>
